
<template>
  <div class="tabBar-wrap">
    <article class="tabBar-box">
      <ul class="tabBar-nav" v-if="navList.length > 0">
        <li class="item" v-for="(item, index) in navList"
            @click="selectNavItem(index, item.pagePath)"
            :key="index">
          <p class="item-images">
            <img :src="selectNavIndex === index ? item.selectedIconPath : item.iconPath" alt="iconPath">
          </p>
          <p :class="selectNavIndex === index ? 'item-text item-text-active' : 'item-text' ">
            {{item.text}}
          </p>
        </li>
      </ul>
    </article>
  </div>

</template>

<script>
// import store from 'vuex'
export default {
  name: 'tabBar',
  props: ['selectNavIndex', 'needButton', 'handButton', 'btnText'],
  data () {
    return {
      navList: [
        {
          pagePath: '../../../pages/driver-side/taskOrder/main',
          iconPath: '/static/img/home.png',
          selectedIconPath: '/static/img/home-active.png',
          text: '抢单'
        },
        {
          pagePath: '../../../pages/driver-side/task/main',
          iconPath: '/static/img/order.png',
          selectedIconPath: '/static/img/order-active.png',
          text: '任务'
        },
        {
          pagePath: '../../../pages/driver-side/driver/main',
          iconPath: '/static/img/my.png',
          selectedIconPath: '/static/img/my-active.png',
          text: '师傅'
        }
      ]
    }
  },
  created () {
  },
  methods: {
    selectNavItem (index, pagePath) {
      console.log(this.selectNavIndex)
      console.log(pagePath)
      if (index === this.selectNavIndex) {
        return false
      }

      if (index === 0 && this.selectNavIndex === -1) {
        this.$emit('fetch-index')
      }
      this.bindViewTap(pagePath)
    },
    /**
     * 路由跳转
     */
    // bindNavigateTo (url) {
    //   wx.navigateTo({
    //     url
    //   })
    // },

    /**
     * tabBar路由跳转
     */
    bindViewTap (url) {
      // 回到顶部
      // if (url === '../index/main') {
      //   store.commit('setGroupsID', '')
      // }
      wx.redirectTo({
        url: url
      })
    }
  }
}
</script>

<style scoped>
.tabBar-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  padding: 10rpx 0 30rpx 0;
  border-top: 1rpx solid #000;
  background-color: #f8f8f8;
  left: 0;
}

.tabBar-nav {
  width: 100%;
  display: flex;
}
.item {
  flex: 1;
  text-align: center;
}
.item-text {
  color: #666;
  font-size: 20rpx;
  transition: .24s linear;
}
.item-text-active {
  color: #27a79a;
}

.item-images {
  width: 48rpx;
  height: 48rpx;
  margin: 0 auto;
  text-align: center;
  transition: .24s linear;
}
img {
  display: inline;
  width: 100%;
  height: 100%;
}
.submit-box-btn {
  position: relative;
  z-index: 999;
  width: 85%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 10rpx;
  color: #404040;
  font-size: 16rpx;
  border: none;
  background-color: #eee;
  text-align: center;
  border: 1px solid #eee;
}

.submit-box-btn-active {
  color: #fff;
  border: none;
  border: 1px solid #ff6c00;
  background-color: #ff6c00;
}
button {
  border: none;
  outline: none;
}
</style>
